<script setup lang="ts">
const time = defineModel<string>({ required: true })

const start = ref('')
const end = ref('')
watchEffect(() => {
  const tt = (unref(time) || '').split('_')
  start.value = tt[0] ?? ''
  end.value = tt[1] ?? ''
})
watch([start, end], () => {
  const s = unref(start) ?? ''
  const e = unref(end) ?? ''
  if (!s) {
    ElMessage.warning('请选择开始年份')
  }
  if (!e) {
    ElMessage.warning('请选择结束年份')
  }
  time.value = `${s}_${e}`
})

function checkYear() {
  const s = unref(start)
  const e = unref(end)
  if (+s > +e) {
    ElMessage.warning('开始年份不能大于结束年份')
  }
}
</script>

<template>
  <div class="align-center flex">
    <ElDatePicker
      v-model="start"
      type="year"
      placeholder="开始年份"
      value-format="YYYY"
      format="YYYY"
      class="free"
      style="width: 120px"
      :clearable="false"
      :editable="false"
      @change="checkYear"
    />
    <span
      style="
        margin: 0 10px;
        font-size: var(--el-font-size-base);
      "
    >
      至
    </span>
    <ElDatePicker
      v-model="end"
      type="year"
      placeholder="结束年份"
      value-format="YYYY"
      format="YYYY"
      class="free"
      style="width: 120px"
      :clearable="false"
      :editable="false"
      @change="checkYear"
    />
  </div>
</template>
